<template>
  <div>
    <div
      style="position: absolute; top: 50%"
      :style="{ left: isShow ? '200px' : '0px' }"
    >
      <div class="showTree" @click="handleShowTree">
        <i :class="isShow ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"></i>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'isShowTreeBtn',
  data() {
    return {
      isShow: true,
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleShowTree() {
      this.isShow = !this.isShow
      this.$emit('showTree', this.isShow)
    },
  },
}
</script>
<style lang="scss" scoped>
.showTree {
  width: 15px;
  height: 50px;
  border: 1px #dfdfdf solid;
  line-height: 50px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  text-align: center;
  cursor: pointer;
  &:hover {
    background-color: #007dff;
    color: #fff;
  }
}
</style>
